<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
  <title><%=title %></title>
</head>
<body>
  <h1>mongodb 的增删改查的演示</h1>
  <div>用户名： <input id="username"/></div>
  <div>密码： <input type="password" id="password"/></div>
  <div>年龄： <input type="number" id="age"/></div>
  <div><button id="register">注册</button></div>
  <hr/>
  <div>
    <button id="update">更新</button>
    <button id="delete">删除</button>
  </div>
  <hr>
  <table border="1px">
    <thead>
    <tr>
      <td>id</td>
      <td>用户名</td>
      <td>年龄</td>
      <td>操作</td>
    </tr>
    </thead>
    <tbody>
      <tr>
        <td></td>
      </tr>
    </tbody>
  </table>

  <script>
    const register = document.querySelector("#register")
    const update = document.querySelector("#update")
    const deleteButton = document.querySelector("#delete")
    const username = document.querySelector("#username")
    const password = document.querySelector("#password")
    const age = document.querySelector("#age")

    register.onclick = () => {
      console.log(username.value, password.value, age.value)
      fetch("/api/user",{
        method: "POST",
        body: JSON.stringify({
          username: username.value,
          age: age.value,
          password: password.value
        }),
        headers: {
          "Content-Type": "application/json"
        }
      }).then(res => res.json()).then(res => {
        console.log(res)
      })
    }

    update.onclick = ()  => {
      console.log(username.value, password.value, age.value)
      fetch(`/api/user/660145db4b94c42f9393e49d`,{
        method: "PUT",
        body: JSON.stringify({
          username: username.value,
          age: age.value,
          password: password.value
        }),
        headers: {
          "Content-Type": "application/json"
        }
      }).then(res => res.json()).then(res => {
        console.log(res)
      })
    }

    deleteButton.onclick = () => {
      fetch('/api/user/660145db4b94c42f9393e49d',{
      method:"DELETE"
    }).then(res => res.json()).then(res => {
        console.log(res)
      })
    }



    const onUpdate = (id) => {
      fetch(`/api/user/${id}`,{
        method: "PUT",
        body: JSON.stringify({
          username: username.value,
          age: age.value,
          password: password.value
        }),
        headers: {
          "Content-Type": "application/json"
        }
      }).then(res => res.json()).then(res => {
        console.log(res)
      })
    }
    const onDelete = (id) => {
      fetch(`/api/user/${id}`,{
        method:"DELETE"
      }).then(res => res.json()).then(res => {
        console.log(res)
      })
    }
    // 获取列表
    fetch("api/user?page=1&limit=10").then(res => res.json()).then(res => {
      console.log(res)
      const tbody = document.querySelector("tbody")
      tbody.innerHTML = res.map(item =>
        `<tr>
            <td>${item._id}</td>
            <td>${item.username}</td>
            <td>${item.age}</td>
            <td>
                <button onclick="onUpdate('${item._id}')">编辑</button>
                <button onclick="onDelete('${item._id}')">删除</button>
            </td>
          </tr>
        `
      ).join("")
    })
  </script>
</body>
</html>